<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>3DSlice משחק הפריסות</title>
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/bootstrap.css">
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/font.css">
</head>

<body>

<div id="v" style="position:fixed; width:100% align='center'; top:50%; left:50%; margin-top: -250px; margin-left: -250px; display:none">
    <img src="../dev/images/v1.png"/>
</div>

<div id="x" style="position:fixed; width:100% align='center'; top:50%; left:50%; margin-top: -250px; margin-left: -250px; display:none">
    <img src="../dev/images/x.png" />
</div>

<script type="text/x-handlebars" data-template-name="application">
    <div class="container">
        {{partial navigation}}
        <div style="text-align: right;">
        {{outlet}}
        </div>
    </div>
</script>

<script type="text/x-handlebars" data-template-name="_navigation">
  <div class="page-header" align="center">
    <a href="index.html"><img src="logo.png"/></a>
  </div>
  <div class="navbar navbar-inverse">
    <div class="navbar-inner">
      <ul class="nav">
        {{#linkTo shapes tagName='li'}}<a {{action clean bindAttr href="view.href"}}>מאגר הגופים</a>{{/linkTo}}
        {{#linkTo game tagName='li'}}<a {{action clean bindAttr href="view.href"}}>המשחק</a>{{/linkTo}}
        {{#linkTo guide tagName='li'}}<a {{action clean bindAttr href="view.href"}}>ראשי</a>{{/linkTo}}
      </ul>
    </div>
  </div>
</script>

<script type="text/x-handlebars" id="about">
<hr>
  <div class='about'>
    יכיל מידע נוסף במידת הצורך
  </div>
</script>

<script type="text/x-handlebars" id="shapehebdesc">
    <h4 style="text-align:center; font-style: normal; font-family: 'carmelit_boldbold';">
        {{shape.hebTitle}}
        <button {{action toggleCollapse}} class="btn btn-danger" style="float:left; opacity:0.6;">{{controller.buttonText}}</button>
    </h4>
    <br />
    {{view App.Shape3dView shapeNameBinding=shape.divId}}
    <br />
    <div {{bindAttr class=controller.collapseState}}>
        {{shape.hebDesc}}
    </div>
</script>

<script type="text/x-handlebars" id="shapes">
    <hr>
    <div class="row">
        <ul class="thumbnails">
        {{#each shape in model}}
          <li class="span4">
            {{#view App.SummaryScrollView}}
                <div class="caption">
                    {{render shapehebdesc shape}}
                </div>
           {{/view}}
          </li>
        {{/each}}
    </ul>
    </div>
</script>

<script type="text/x-handlebars" id="guide">
    <hr>
    <div class='guide' style="text-align:center; direction:rtl; width: 600px; display:block; margin-left:auto; margin-right:auto;">

        <div class="hero-unit" style="font-family: 'carmelit_regularregular';">

            <h2>ברוכים הבאים</h2>
            <ul>
            
            <dl>
            <dt>פריסות גופים</dt>
            <br />
            <dd>
            <li>
            ביישומון זה יוצגו לפניכם גופים תלת מימדיים אותם תוכלו לסובב באמצעות העכבר.
            </li>
            <br />
             <li>
             בכל שלב, יופיעו מתחת לגוף מספר פריסות אשר רק אחת מהן מתאימה לגוף המוצג.
            </li>
            <br />
             <li>
             עם בחירתכם בתשובה תקבלו משוב. במידה וטעיתם, תוכלו לתקן את תשובתכם או לדלג על השאלה ולעבור לשאלה הבאה. 
             </li>
            </dd>
            <br />
            <dt>הגופים</dt><br />
            <dd>
            <li>
            ניתן לעיין ב"מאגר הגופים", הכולל תיאור של הגופים. 
            </li>
            <br />
            <li>
            עבור כל גוף תוכלו ללחוץ על הכפתור "הצג תיאור".
            </li>
            </dd>
            <br />
            </dl>
          
            <h2>
            בהצלחה!
            </h2>
                
            </ul>

        </div>
    </div>
</script>

<script type="text/x-handlebars" data-template-name="game">
    <hr>
    <div id="game" style="text-align: center;">
         <button class="btn btn-large btn-primary" {{action startGame}}>התחל משחק</button>
    </div>

</script>

<script type="text/x-handlebars" data-template-name="finished">
<div class="hero-unitz" style="text-align: center; direction:rtl;">

<span class="badge badge-important">
      <h2>כל הכבוד, סיימתם את המשימה!</h2>
      </span>
</div>
</script>

<script type="text/x-handlebars" data-template-name="_shape">
</script>

<script type="text/x-handlebars" data-template-name="_answer">
</script>

<script type="text/x-handlebars" data-template-name="question">
  
  {{#if controllers.game.currentQuestionID}}
   <div id="question" style="text-align: center;">
    <div class="progress">
        <div class="bar" {{bindAttr style=controllers.game.progressBarStyle}}>
        <b> [ {{ model.id }} / {{controllers.game.maxQuestionID}} ]</b>
        </div>
    </div>

    <ul class="pager">
          <li {{bindAttr class=controllers.game.nextButtonClass}}>
          <a {{action submitAnswer}}>
← דלג לשאלה הבאה
          </a>
          </li>
          
          <li {{bindAttr class=controllers.game.previousButtonClass}}>
          <a {{action previousQuestion}}>
חזור לשאלה הקודמת →
          </a>
          </li>
    </ul>
        
     <br />
     <br />
      {{#if model.shape.divId}}
        {{view App.QuestionShapeView kindBinding=model.shape.divId}}
      {{/if}}
      <br />
      <br />
      <br />
      <br />

      <div class="row">
        <ul class="thumbnails">
          {{#each answer in model.answers}}
              {{#if answer.imageUrl}}
          <li class="span3">	     
                <a class="thumbnail btn" {{action selectAnswer answer.id}}>
                  {{view App.AnswerView srcBinding=answer.imageUrl}}
                </a>
          </li>
              {{/if}}
          {{/each}}
        </ul>
      </div>
      <br />
      </div>

{{else}}
<div style="text-align: center;">
  <b>
    המשחק לא הותחל כראוי, יש להתחיל מחדש
  </b>
</div>
{{/if}}
    
</script>

<script src="js/libs/jquery-1.9.1.js"></script>
<script src="js/libs/jquery.slimscroll.js"></script>
<script src="js/libs/handlebars-1.0.0-rc.4.js"></script>
<script src="js/libs/ember-1.0.0-rc.6.js"></script>
<script src="js/libs/ember-data-latest.js"></script>
<script src="js/app.js"></script>

</body>
</html>
